// mixins

// 移动端尺寸适配  使用方法 width:rem(100); 这里的100 就是设计图尺寸
@function rem($px) {
  // $px * 375 / 75000
  @return ($px * 0.01) + rem;
}

// Mixins语法: 使用@mixin+name 定义代码块，使用@include+name引入代码块

// 未知宽高的内容横向纵向居中 注意父元素需要  position: relative; 使用方法 @include center;
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 原素内容横向纵向都居中 使用方法 @include centerChild;
@mixin centerChild {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 原素内容纵向居中  使用方法 @include centerItems;
@mixin centerItems {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

// 文本末尾添加省略号 单行  使用方法 @include ellipsis;
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 宽度不固定，适合多行以及移动端显示 使用方法 @include ellipsisMroe(3);
@mixin ellipsisMroe($n) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
}

// 居中显示图片 取宽高长的那部分自适应  缺点:不铺满 会有空白 优点: 图片完全显示  使用方法 @include imgCenterAll;
@mixin imgCenterAll {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

// 居中显示图片 取宽高短的那部分自适应  缺点:图片会被截取 优点: 铺满   使用方法 @include imgCenterPortion;
@mixin imgCenterPortion {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 移动端 边框一像素实现  注释掉 需要自行根据条件修改

// @mixin mBorderT {
//   position: absolute;
//   box-sizing: border-box;
//   content: ' ';
//   pointer-events: none;
//   right: 0;
//   top: 0;
//   left: 0;
//   border-top: 1px solid #ccc;
//   transform: scaleY(0.5);
// }

// @mixin mBorderB {
//   position: absolute;
//   box-sizing: border-box;
//   content: ' ';
//   pointer-events: none;
//   right: 0;
//   bottom: 0;
//   left: 0;
//   border-bottom: 1px solid #ccc;
//   transform: scaleY(0.5);
// }
